<!-- 基本信息 -->
<template>
  <div class="basicInfo-container">
    <div class="info">
      <div class="item">
        <DormitoryInfo :dormitory="dormitoryRef" :Loading="Loading"></DormitoryInfo>
      </div>
      <div class="item">
        <FloorInfo :floor="floorRef" :Loading="Loading"></FloorInfo>
      </div>
      <div class="item">
        <RoomInfo :roomInfo="roomNoRef" :Loading="Loading"></RoomInfo>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";
import { getDormitory, getFloor, getRoomNo } from "@/api/address.js";
import { onMounted, ref } from "vue";

import DormitoryInfo from "./DormitoryInfo.vue";
import FloorInfo from "./FloorInfo.vue";
import RoomInfo from "./RoomInfo.vue";
const store = useUserStore();
const { readUserInfo } = storeToRefs(store);
const dormitoryRef = ref([]); // 宿舍楼
const floorRef = ref([]); // 楼层
const roomNoRef = ref([]); // 宿舍
const Loading = ref(true) // 加载中
onMounted(async () => {
  let data = await getDormitory(readUserInfo.value.dormitoryId);
  dormitoryRef.value = data.data[0];
  data = await getFloor({
    dormitoryId: readUserInfo.value.dormitoryId,
    floorId: readUserInfo.value.floorID,
  });
  floorRef.value = data.data[0];
  data = await getRoomNo({
    dormitoryId: readUserInfo.value.dormitoryId,
    floorId: readUserInfo.value.floorID,
    roomNoId: readUserInfo.value.roomNoId,
  });
  roomNoRef.value = data.data[0];
  Loading.value = false
});
// 获取更多
function getMores(index) {
  console.log(index);
}
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.basicInfo-container {
  width: 100%;
  height: 100%;
  position: relative;
  .info{
    margin: 0 auto;
    width: 90%;
    display: flex;
    .item{
      min-height: 150px;
      flex: 1;
      margin: 0 5px;
      border: 3px solid @gray;
      border-radius: 10px;
    }
  }
}
</style>